<template>
	<div class="ele-body ele-body-card"  v-loading="fullscreenLoading">
		<!-- 顶部四个卡片 -->
		<el-row :gutter="15">
			<el-col :lg="6" :md="12">
				<el-card class="analysis-chart-card" style="background: #02AFFF;border-radius: 10px" shadow="never">
					<div class="analysis-chart-card-head">
						<img src="@/assets/dashboard/renshu.png" alt="" class="el-icon-dash">
						<div >学校总人数</div>
					</div>
					<div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;">
						<span>男生</span>
						<span>女生</span>
					</div>
					<div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
						<span>{{analysisData.man_num}}</span>
						<span>{{ analysisData.women_num }}</span>
					</div>
				</el-card>
			</el-col>
			<el-col :lg="6" :md="12">
				<el-card class="analysis-chart-card" style="background: #847FFF;border-radius: 10px" shadow="never">
					<div class="analysis-chart-card-head">
						<img src="@/assets/dashboard/canyurenshu.png" alt="" class="el-icon-dash">
						<div >参与体测人数</div>
					</div>
					<div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;">
						<span>参与人数</span>
						<span>参与率</span>
					</div>
					<div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
						<span>{{analysisData.canyu_num}}</span>
						<span>{{ analysisData.canyu_rate }}</span>
					</div>
				</el-card>
			</el-col>
			<el-col :lg="6" :md="12">
				<el-card class="analysis-chart-card" style="background: #00CFDE;border-radius: 10px" shadow="never">
					<div class="analysis-chart-card-head">
						<img src="@/assets/dashboard/canyurenshu.png" alt="" class="el-icon-dash">
						<div >体测合格率</div>
					</div>
					<div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;">
						<span>合格人数</span>
						<span>合格率</span>
					</div>
					<div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
						<span>{{ analysisData.hege_num }}</span>
						<span>{{ analysisData.hege_rate }}</span>
					</div>
				</el-card>
			</el-col>
			<el-col :lg="6" :md="12">
				<el-card class="analysis-chart-card" style="background: #FF9E00;border-radius: 10px" shadow="never">
					<div class="analysis-chart-card-head">
						<img src="@/assets/dashboard/canyurenshu.png" alt="" class="el-icon-dash">
						<div >体测平均分</div>
					</div>
					<div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;">
						<span>平均分</span>
						<span>最高分{{ analysisData.max_avg }}</span>
					</div>
					<div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
						<span>{{ analysisData.avg_num }}</span>
						<span>最低分{{ analysisData.mix_avg }}</span>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 三行 各院系平均分-->
		<el-row :gutter="15">
			<el-col :lg="24" :md="24">
				<el-card
					shadow="never"
					header=""
					body-style="padding: 10px 5px 0 0;">
					<ele-chart
						ref="visitpingjufenChart"
						style="height: 323px;"
						:option="yuanxiPJChartOption"/>
				</el-card>
			</el-col>
		</el-row>
		<!-- 五行 各院系项目等级-->
		<el-row :gutter="15">
			<el-col :lg="24" :md="24">
				<el-card
					shadow="never"
					header=""
					body-style="padding: 10px 5px 0 0;">
					<ele-chart
						ref="visitdengjiChart"
						style="height: 323px;"
						:option="yuanxiXMDJChartOption"/>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import EleChart from 'ele-admin/packages/ele-chart';

export default {
	name: 'DashboardAnalysis',
	components: {EleChart},
	data() {
		return {
			xuenianList:[],
			id:'',
			name:'',
			isall:'0',
			// 支付笔数
			payNumData: [],
			// 身高院系搜索
			formYuanxi: {
				yuanxi: ''
			},
			schoolForm:{
				gradeId:'',
				niandu: '',
				type: '',
				begin: '',
				end: '',
				start_end:[],
				model:''
			},
			labelOption :{
				show: true,
				position: 'inside',
				formatter: '{c}%',
				color:'#fff',
				rotate: 90
			},
			// 年级列表
			gradeList: [],
			// 大屏预览总数据
			analysisData:{},
			
			departmentsList:[],
			//  各院系平均分
			yuanxi_avgsData:[],
			//   各项目等级
			project_levelData:[],
			fullscreenLoading:false
		};
	},
	computed: {
		//各院系平均分
		yuanxiPJChartOption(){
			return {
				dataZoom: {
					// 开启数据平移
					type: 'slider', // 滑动条单独显示
					show: true, // 是否显示滑动条
					startValue: 0, // 展示区域内容的起始数值
					endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
					height: 10, // 滑动条组件高度
					bottom: 0, // 距离图表区域下边的距离
					showDetail: false, // 拖拽时是否显示详情
					showDataShadow: false,
					fillerColor: '#cfedfc', // 平移条的填充颜色
					borderColor: 'transparent', // 边框颜色
					zoomLock: true, // 锁定视图
					brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
					// 通过该属性可以只滑动，不显示缩放功能
					handleStyle: {
						opacity: 0,
					},
					lineStyle: {
						opacity: 0,
					},
					textStyle: {
						fontSize: 0,
					},
				},
				title:{
					text:'各院系平均分'
				},
				grid: {
					top:'15%',
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				legend: {},
				tooltip: {
					axisPointer: {
						type: 'shadow'
					},
					trigger: 'axis',
					formatter(params) {
						console.log("====params",params)
						let color =['#ff0230','#26ee5e','#00BFFF'];
						let newList = ``;
						params.forEach((item,index)=>{
							let val = item["value"];
							let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
							let data = `${circle}${color[index]}"></span> ${
								item["seriesName"]
							}: ${val[index+1]}分`;
							newList = newList + `<br/>${data}`
						})
						return `${params[0].axisValueLabel}<br/>${newList}`;
					}
				},
				color:['#ff0230','#26ee5e','#00BFFF'],
				dataset: {
					source: this.yuanxi_avgsData
				},
				xAxis: {
					type: 'category',
					axisLabel:{
						fontSize:12,
						interval: 0,
						rotate: 30
					},
				},
				yAxis: { gridIndex: 0 },
				series: [
					{
						type: 'line',
						seriesLayoutBy: 'row',
						emphasis: { focus: 'series' },
						label: {
							show: true,
							position: 'top',
							color:'#ff0230',
							
						},
					},
					{
						type: 'line',
						label: {
							show: true,
							position: 'top',
							color:'#26ee5e',
							
						},
						seriesLayoutBy: 'row',
						emphasis: { focus: 'series' }
					},
					{
						type: 'line',
						seriesLayoutBy: 'row',
						emphasis: { focus: 'series' },
						label: {
							show: true,
							position: 'top',
							color:'#00BFFF',
							
						},
					}
				]
			}
		},
		//   各院系项目等级
		yuanxiXMDJChartOption(){
			return {
				dataZoom: {
					// 开启数据平移
					type: 'slider', // 滑动条单独显示
					show: true, // 是否显示滑动条
					startValue: 0, // 展示区域内容的起始数值
					endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
					height: 10, // 滑动条组件高度
					bottom: 0, // 距离图表区域下边的距离
					showDetail: false, // 拖拽时是否显示详情
					showDataShadow: false,
					fillerColor: '#cfedfc', // 平移条的填充颜色
					borderColor: 'transparent', // 边框颜色
					zoomLock: true, // 锁定视图
					brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
					// 通过该属性可以只滑动，不显示缩放功能
					handleStyle: {
						opacity: 0,
					},
					lineStyle: {
						opacity: 0,
					},
					textStyle: {
						fontSize: 0,
					},
				},
				title:{
					text:'各院系项目等级'
				},
				grid: {
					top:'15%',
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				legend: {},
				tooltip: {
					axisPointer: {
						type: 'shadow'
					},
					trigger: 'axis',
					formatter(params) {
						console.log("====params",params)
						let color =['#26ee5e','#36c9f6','#f1be17','#ff0230'];
						let newList = ``;
						params.forEach((item,index)=>{
							let val = item["value"];
							let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
							let data = `${circle}${color[index]}"></span> ${
								item["seriesName"]
							}: ${val[index+1]}分`;
							newList = newList + `<br/>${data}`
						})
						return `${params[0].axisValueLabel}<br/>${newList}`;
					}
				},
				color:['#26ee5e','#36c9f6','#f1be17','#ff0230'],
				dataset: {
					source:this.project_levelData
				},
				xAxis: { type: 'category',
					axisLabel:{
						fontSize:12,
						interval: 0,
						rotate: 30
					},},
				yAxis: { gridIndex: 0 },
				series: [
					{
						type: 'line',
						seriesLayoutBy: 'row',
						emphasis: { focus: 'series' },
						label: {
							show: true,
							position: 'top',
							color:'#26ee5e',
							
						},
					},
					{
						type: 'line',
						label: {
							show: true,
							position: 'top',
							color:'#36c9f6',
							
						},
						seriesLayoutBy: 'row',
						emphasis: { focus: 'series' }
					},
					{
						type: 'line',
						seriesLayoutBy: 'row',
						emphasis: { focus: 'series' },
						label: {
							show: true,
							position: 'top',
							color:'#f1be17',
							
						},
					},
					{
						type: 'line',
						label: {
							show: true,
							position: 'top',
							color:'#ff0230',
							
						},
						seriesLayoutBy: 'row',
						emphasis: { focus: 'series' }
					}
				]
			}
		},
		
	},
	mounted() {
		this.getGradeList();
		this.getDepartmentsList();
		this.getXueList();
		this.getAllData();
	},
	created(){
		this.departmentsId = this.$route.query.id
		this.name = this.$route.query.name
	},
	methods: {
		getXueList() {
			this.$http.get('/annual/getXueList').then(res => {
				if (res.data.code === 0) {
					this.xuenianList = res.data.data;
				} else {
					this.$message.error(res.data.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		changenannv(type){
			this.isall = type;
		},
		/**
		 * 获取年级列表
		 */
		getGradeList() {
			this.$http.post('/grade/getGradesList').then(res => {
				if (res.data.code === 0) {
					this.gradeList = res.data.data;
				} else {
					this.$message.error(res.data.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		/**
		 * 获取院系列表
		 */
		getDepartmentsList() {
			this.getAllData();
			this.$http.post('/departments/getDepartmentsList', {type: this.schoolForm.type}).then(res => {
				if (res.data.code === 0) {
					this.departmentsList = res.data.data;
				} else {
					this.$message.error(res.data.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		/**
		 * 选择日期
		 */
		chooseDate(e){
			console.log("====1",e)
			this.schoolForm.begin = e[0];
			this.schoolForm.end = e[1];
			this.getAllData();
		},
		/* 学院 */
		getxueYuanData() {
			this.yuanxi_avgsData = this.analysisData.yuanxi_avgs;
			this.project_levelData = this.analysisData.project_level;
		},
		/* 获取基本的chart 数据 */
		getAllData(){
			let params = {
				...this.schoolForm,
				departmentsId:this.departmentsId,
			}
			this.fullscreenLoading = true;
			this.$http.post('/data/saishi',params).then(res => {
				if (res.data.code === 0) {
					this.analysisData = res.data.data;
					//   获取学院数据
					this.getxueYuanData();
				} else {
					this.$message.error(res.data.msg);
				}
				this.fullscreenLoading = false;
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
	},
	activated() {
		['visitpingjufenChart','visitdengjiChart'].forEach((name) => {
			this.$refs[name].resize();
		});
	}
}
</script>

<style scoped lang="less">
/* 统计卡片4个 */
.analysis-chart-card-head{
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #FFFFFF;
	margin-bottom: 8px;
	.el-icon-dash{
		width: 14px;
		height: 14px;
		margin-right: 4px;
	}
}
/* 统计卡片 */
.analysis-chart-card-num {
	font-size: 30px;
}

.analysis-chart-card-content {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	&:first-child{
		margin-bottom: 6px;
	}
	span{
		display: inline-block;
		width: 45%;
	}
}

.analysis-chart-card-text {
	padding-top: 12px;
}

/* 销售额、访问量工具栏 */
.demo-monitor-tool {
	padding: 0 20px;
}

.demo-monitor-tool ::v-deep .el-tabs__nav-wrap:after {
	display: none;
}

.demo-monitor-tool ::v-deep .el-tabs__item {
	height: 50px;
	line-height: 50px;
	font-size: 15px;
}

.demo-monitor-tool .el-date-editor {
	width: 256px;
	margin-left: 10px;
}

/* 小标题 */
.demo-monitor-title {
	padding: 0 20px;
	margin: 15px 0 5px 0;
}

/* 排名item */
.demo-monitor-rank-item {
	padding: 0 20px;
	line-height: 20px;
	margin-top: 18px;
}
</style>
